<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-html"  prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean"  prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<%@page import="com.kcs.common.utils.commonUtils"%>
<%@page import="com.kcs.common.utils.PropsUtils"%>
<%@page import="com.kcs.common.utils.Constant"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Setup User Profile</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.pack.js"></script>    
<script type="text/javascript" src="jsp/script/common.js"></script>  
<link rel="stylesheet" type="text/css" href="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.css"/>
<link rel="stylesheet" type="text/css" href="jsp/css/table.css"/>
<link rel="stylesheet" type="text/css" href="jsp/css/fxmarginStyle.css"/>
<script type="text/javascript">

	var g_data;
	var g_reset_case;

	$(document).ready(function() {
		jQuery("#action").val("init");
		var roleId 	= jQuery("#roleId");
		var role 	= jQuery("#role");
		roleId.append(role.html());

		removeDeleteButton();
	});
	
	function saveFunction(){
		var userCode 	= jQuery("#userCode").val();
		var userName 	= jQuery("#userName").val();
		var roleId	 	= jQuery("#roleId").val();
		var rowVersion 	= jQuery("#rowVersion").val();		
	
		if(validate(userCode, userName, roleId)){
			loading();
			jQuery.post("/FxMargin/SetupUserProfileServlet",{
				"userCode"		: userCode,
				"userName"		: userName,
				"role"	  		: roleId,
				"rowVersion"	: rowVersion,
				"action"		: "insert"
				},
				function(data){
					if(data != null && data.data == "s"){
						unloading();
						alert(m_save_success);
						searchUserProFile();
						$.fancybox.close();
					} else if(data.data == "to"){
						unloading();
						alert("Session time out!");
						$.fancybox.close();
					} else if(data.data == "user_dup"){
						unloading();
						alert(m_duplicate_user);
					}else{
						unloading();
						alert(m_save_fail);
						$.fancybox.close();
					}
					
					},"json").error(
				function(){
					unloading();
					alert("Ajax error");
				}
			);
		}
		
	}
	
	function updateFunction(){
		var id		 	= jQuery("#id").val();
		var userCode 	= jQuery("#userCode").val();
		var userName 	= jQuery("#userName").val();
		var roleId	 	= jQuery("#roleId").val();
		var rowVersion 	= jQuery("#rowVersion").val();		
	
		if(validate(userCode, userName, roleId)){
			loading();
			jQuery.post("/FxMargin/SetupUserProfileServlet",{
				"id" 			: id,
				"userCode" 		: userCode,
				"userName" 		: userName,
				"role" 			: roleId,
				"rowVersion"	: rowVersion,
				"action"		: "update"
				},
				function(data){
					if(data != null && data.data == "s"){
						unloading();
						alert(m_save_success);
						searchUserProFile();
					} else if(data.data == "to"){
						unloading();
						alert("Session time out!");
					} else{
						unloading();
						alert(m_save_fail);
					}
					$.fancybox.close();
				},"json").error(
				function(){
					unloading();
					alert("Ajax error");
				}
			);
		}
		
	}
	
	function validate(userCode, userName, roleId){
		if(userCode == "") { alert(m_please_fill_data + " User Code"); return false;}
		if(userName == "") { alert(m_please_fill_data + " User Name"); return false;}
		if(roleId == "")   { alert(m_please_fill_data + " Role");   return false;}
		return true;
	}
	
	function openSavePopup(){
		jQuery("#saveDiv").show();
		jQuery("#updateDiv").hide();
		g_reset_case = "save";
		resetPopupFunction();
		
		openPopup("fancyPopup",function(){});
	}
	
	function openUpdatePopup(data){
		jQuery("#saveDiv").hide();
		jQuery("#updateDiv").show();
		g_data 			= data;
		g_reset_case 	= "update";
		resetPopupFunction();
		
		openPopup("fancyPopup",function(){});
		
	}
	
	function resetPopupFunction(){
		if(g_reset_case == "save") {
			jQuery("#userCode").val("");
			jQuery("#userName").val("");
			jQuery("#roleId").val("");
	
			jQuery("#userCode").removeAttr("readonly");
			jQuery("#userCode").removeAttr("class");
		} else if (g_reset_case == "update") {
			var data = g_data;

			jQuery("#id").val(data.id);
			jQuery("#userCode").val(data.userId);
			jQuery("#userName").val(data.userName);
			jQuery("#roleId").val(data.roleId);
			jQuery("#rowVersion").val(data.rowVersion);
	
			jQuery("#userCode").prop("readonly", "readonly");
			jQuery("#userCode").attr("class","disabled");
		}
	}
	
	function resetFunction(){
		loading();
		jQuery("#action").val("init");
		submitform();
	}
	
	function searchUserProFile(){
		loading();
		jQuery("#action").val("search");
		submitform();
	}
	
	function deleteUserProFile(id){
		var del = confirm(m_do_delete);

		if(del == true){
			jQuery("#deleteId").val(id);
			jQuery("#action").val("delete");
			submitform();
		}	
	}

	function removeDeleteButton(userCode){
		var table = document.getElementById("data");
		var userCodeColumn = 1;
		var deleteButtonColumn = 5;

		if(table){
			for(var i=0; i<table.rows.length; i++){
				if(table.rows[i].cells[userCodeColumn].innerHTML == "fxmadmin"){
					table.rows[i].cells[deleteButtonColumn].innerHTML = "";
					return;
				}
			}
		}
	}

</script>
</head>
<body><%@ include	file="include/headerMenu.jsp"%>

<center>
<div style="width:95%" align="center">

	<html:form action="/SetupUserProfileAction.do">
		<html:hidden property="action" styleId="action"/>
		<html:hidden property="deleteId" styleId="deleteId"/>
		
		<table width="100%" class="MarginHeader">
			<tr>
				<td align="left">User Profile</td>
			</tr>
		</table>
		
		<div class="CriteriaBox">
			<table width="100%" class="MarginCriteria">
				<tr>
					<td width="50%" align="right">User Code :</td>
					<td width="50%" align="left" ><html:text property="userCode" maxlength="30"></html:text></td>
				</tr>
				<tr>
					<td width="50%" align="right">User Name :</td>
					<td width="50%" align="left" ><html:text property="userName" maxlength="100"></html:text></td>
				</tr>			
				<tr>
					<td width="50%" align="right">Role :</td>
					<td width="50%" align="left" >
						<html:select property="role" styleId="role">
							<html:option value="">All</html:option>
							<html:optionsCollection name="SetupUserProfileActionForm" property="roleList" label="name" value="id" />
						</html:select>
					</td>
				</tr>
			</table>
			
			<table width="100%" class="MarginCriteria">
				<tr>
					<td width="100%" align="center">
						<input type="button" value="Search" class="button" onclick="searchUserProFile();"/>
						&nbsp;&nbsp;
						<input type="button" value="Reset" class="button" onclick="resetFunction();"/>
						&nbsp;&nbsp;
						<input type="button" value="New" class="button" onclick="openSavePopup();"/>
					</td>
				</tr>
			</table>
		</div>
	
		<logic:present name="<%=Constant.SHOW_RESULT%>">
			<div class="MarginTable" >
				<display:table id="data" name="sessionScope.SetupUserProfileActionForm.userProFileList" requestURI="/SetupUserProfileAction.do" pagesize="10"  >
					
					<display:column property="rowNum"	sortable="false" title="No" class="center"/>
					<display:column property="userId"   sortable="false" title="User Code" class="left"/>
					<display:column property="userName" sortable="false" title="User Name" class="left"/>			
					<display:column property="roleName" sortable="false" title="Role" class="center"/>
					<display:column title="Edit User" sortable="false" class="center">
						<img src="jsp/images/edit.png" alt="Edit" style="width:30px;cursor:pointer;" onclick="openUpdatePopup(({${data.jsonObject}}));"/>
					</display:column>
					<display:column title="Delete User" sortable="false" class="center">
						<img src="jsp/images/delete.png" alt="Delete" style="width:30px;cursor:pointer;" onclick="deleteUserProFile('${data.id}');"/>
					</display:column>
				</display:table>
			</div>
		</logic:present>

		<div style="display:none">
	        <div id="fancyPopup" style="width:450px">
	        	<input type="hidden" id="id" value=""/>
	        	<input type="hidden" id="rowVersion" value="0"/>
	        	<table width="100%" class="MarginHeader">
					<tr>
						<td align="left">User Profile</td>
					</tr>        	
	        	</table>
	            <table width="100%" class="MarginCriteria">
					<tr>
						<td width="50%" align="right"><font color="red">* </font>User Code :</td>
						<td width="50%" align="left" ><input type="text" id="userCode" maxlength="30"/></td>
					</tr>
					<tr>
						<td width="50%" align="right"><font color="red">* </font>User Name :</td>
						<td width="50%" align="left" ><input type="text" id="userName" maxlength="100"/></td>
					</tr>			
					<tr>
						<td width="50%" align="right"><font color="red">* </font>Role :</td>
						<td width="50%" align="left" >
							<select id="roleId"></select>
						</td>
					</tr>
				</table>
				<table width="100%">
					<tr>
						<td width="33%" align="center">
							<div id="saveDiv"><input type="button" value="save" class="button" id="save" onclick="saveFunction();"/></div>
							<div id="updateDiv"><input type="button" value="save" class="button" id="update" onclick="updateFunction();"/></div>
						</td>
						<td width="33%" align="center"><input type="button" value="reset" class="button" onclick="resetPopupFunction();"/></td>
						<td width="34%" align="center"><input type="button" value="close" class="button" onclick="$.fancybox.close();"/></td>
					</tr>
				</table>
	            
	        </div>
	    </div>
		<%@ include	file="include/footer.jsp"%> 
		<%@ include	file="include/message.jsp"%> 
	</html:form>	
		
</div>
</center>


</body>
</html>